<template>
  <div class="app">
    <div class="bgc">
<img :src="'http://124.93.196.45:10001/'+list.imgUrl" alt="" >
</div>
<!-- 头部 -->

<div class="head" ><span @click=re style="float:left;margin-left: 15px;margin-top: 8px;"><van-icon name="arrow-left" color="white" /></span>
<span v-if="shoucang" @click="change" style="float:right;margin-right: 15px;margin-top: 8px;"><van-icon name="star-o" color="white" /></span>
<span v-else @click="change" style="float:right;margin-right: 15px;margin-top: 8px;"><van-icon name="star" color="yellow" /></span>
<span @click="zhuanfa" style="float:right;margin-right: 10px;margin-top: 8px;"><van-icon name="share-o" color="white"  /></span>
</div>
<div class="msg">
  <div class="pic"><img :src="'http://124.93.196.45:10001/'+list.imgUrl" alt=""></div>
  <div class="msg-right">
    <div class="name">{{list.name}}</div>
    <div style="margin-top:3px"><span><van-rate v-model="value" size="14px" allow-half:true /></span>
    <span style="font-size: 16px;margin-left: 20px;"><span style="font-size:16px;margin-right: -7px;">￥</span> {{list.avgCost}}/人</span>
    </div>
    <div style="font-size:12px;color:red;margin-top:5px"><van-icon name="fire" color="red" size="16px"/>地区热门榜前五</div>
  </div>


<div class="about">
  <div class="margin">营业中 08:00-23:00</div>
  <div>
    <span>有包厢</span>
    <span>有wifi</span>
    <span>空调开放</span>
    <span>可手机充电</span>
  </div>
</div>

<div class="place">
  <div class="address">{{list.address}} ></div>
  <div class="distance" style="font-size:14px;margin-top:5px "><van-icon name="location-o" size="14px"/>距学苑广场步行1.4公里</div>
  <span class="span1"><van-icon name="logistics" />打车</span>
  <span @click="tel"><van-icon name="phone" />电话</span>
  <div style="font-size:14px;margin-top:5px" @click="waimai">外卖></div>
</div>

</div>

<div class="menu">
  <div style="margin:10px 10px;font-size:20px">|到店套餐(6)</div>
<div class="menulist">
  <div v-for="item in menulist" :key="item.id" class="block">
    <div><img :src="'http://124.93.196.45:10001/'+item.imgUrl" alt=""></div>
    <div>
      <div style="width:80%;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;">{{item.name}}></div>
    <div style="font-size:14px;color:#666;width:190px;line-height: 16px;">{{item.detail}}</div>
    <div style="color:red;font-size:12px;margin-top: 10px;">￥<span style="font-size:18px">{{item.price}}</span></div>
    <div class="buy" @click="buy({id:item.id,sellerId:item.sellerId,imgUrl:item.imgUrl,price:item.price,name:item.name})">抢购</div>
    </div>
    
  </div>
</div>


<div style="margin:10px 10px;font-size:20px">|评价</div>
<div class="comment">
  <div v-for="item in commentlist" :key="item.id" class="comment-list">
    <div style="display:flex;justify-content: space-between;width:90%">
      <div class="comment-head">
        <div><van-icon name="manager" size="18px"/></div>
        <div style="margin-left:10px">
          <p style="font-size:16px;">{{item.userName}}</p>
          <p style="margin-top:-5px"><van-rate v-model="item.score" size="12px" allow-half:true /></p>
        </div>
      </div>
      <div style="font-size:14px">{{item.commentDate}}</div>

    </div>
    <div style="font-size:18px;margin-top:10px">{{item.content}}</div>
  </div>
</div>
</div>
  </div>
</template>

<script>
import {restaurantDetail,menulist,commentlist} from "./service"
import mixin from "../../mixin/flag"
export default {
  mixins:[mixin],
 data(){
  return{
list:[],
value:4.6,
menulist:[],
commentlist:[],
shoucang:true
  }
 },
  async mounted() {
let id=this.$route.query.id
    let res =await restaurantDetail(id)
    console.log(id);
      console.log(res);
      this.list=res.data.data
      let res2=await menulist({sellerId:1,categoryId:19});
console.log(res2);
this.menulist=res2.data.data
let res3 =await commentlist({sellerId:id})
console.log(res3);
this.commentlist=res3.data.rows
  },
  methods:{
    tel(){
      this.$dialog.alert({
  title: '电话',
  message: '13986770647',
})
    },
    buy(item){
this.$router.push({path:"/orderView",query:item})
    },
    waimai(){
      this.$dialog.alert({
  title: '提示',
  message: '受疫情影响，外卖暂停服务',
}).then(() => {
  // on close
});
    },
    zhuanfa(){
this.$toast('已转发给小雷')
    },
    change(){
this.shoucang=!this.shoucang
if(this.shoucang){
  this.$toast('收藏已取消')
}else{
  this.$toast('收藏成功')
}
    },
    re(){
this.$router.go(-1)
    }
  }

}
</script>

<style lang="scss" scoped>
.app{
  overflow-x: hidden;
.bgc{
  position: absolute;
  z-index: 0;
  filter: blur(10px);
width: 100%;
height: 150px;
overflow: hidden;
img{
  width: 100%;
  z-index: 0;
}
}
.head{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 40px;
  span{
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: rgba($color: #000000, $alpha: 0.4);
    border-radius: 30%;
    line-height: 30px;
    text-align: center;
  }
}
.msg{
  position: relative;
  // z-index: 1;
  display: flex;
  padding: 10px;
  height: 250px;
  width: 87%;
  margin:15px auto;
  background-color: white;
  border-radius: 10px;
  flex-wrap: wrap;
  overflow: hidden;
  .pic{
  height: 90px;
  width: 90px;
  overflow: hidden;
  border-radius: 10px;
  img{
    width: 100%;
    height: 100%;
  }
}
.msg-right{
  margin-left: 20px;
.name{
  font-weight: bold;
  font-size: 20px;
  overflow:hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
}
.about{
  padding-top: 8px;
  width: 98%;
  height: 45px;
  margin:10px auto;
font-size: 15px;
font-weight: bold;
border-bottom: 1px solid rgb(227, 225, 225);
border-top: 1px solid rgb(227, 225, 225);
overflow: hidden;
.margin{
  margin-bottom: 5px;
}
span{
  padding: 0 8px;
  font-size: 13px;
  background-color: rgb(238, 237, 237);
  margin-right: 10px;
  margin-top: 10px;
  font-weight: normal;
  border-radius: 10px;
}
}
.place{
  width: 95%;
  position: relative;
  .address{
    font-size: 14px;
    font-weight: bold;
    width: 230px;
    line-height: 18px;

  }
  span{

    display: flex;
    flex-direction: column;
    position: absolute;
    right: 0;
    top: 10px;
    font-size: 17px;
    text-align: center;
  }
  .span1{
    right: 40px;
  }
}
}
.menu{
  
  padding-top: 10px;
  width: 100%;
  background-color: rgb(243, 242, 242);
  .menulist{
    
    width: 92%;
    margin: auto;
    background-color: white;
    border-radius: 15px;
    img{
      width: 100px;
      height: 100px;
    }
    .block{
      position: relative;
      display: flex;
      font-size: 18px;
      padding-top: 15px;
      .buy{
        
        background-color: #fc5f2b;
        position: absolute;
        right: 2px;
        top: 20px;
        color: white;
        padding: 8px;
        font-size: 16px;
        border-radius: 20px;
      }
    }
  }


.comment{
  width: 93%;
    margin: auto;
    background-color: white;
    border-radius: 15px;
    .comment-list{
      padding: 10px;
      width: 100%;
      height: 100px;
      .comment-head{
        display: flex;
      }
    }
}
}
}
</style>